<template>
  <div class="pay-status">
    <div class="header" v-if="status===0">
      <div class="img">
        <img width="80" height="80" src="../assets/pay_fail.png" alt="">
      </div>
      <div class="desc">支付失败</div>
    </div>
    <div class="header" v-if="status===1">
      <div class="img">
        <img width="80" height="80" src="../assets/pay_success.png" alt="">
      </div>
      <div class="desc">支付成功</div>
    </div>
    <div class="pay-status-content">
      <div class="pay">
        <span class="pay-desc">实际支付金额：</span>
        <span class="pay-price">¥{{payPrice}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'pay-status',
    data() {
      return {
        status: 1,
        payPrice: 0
      }
    },
    created() {
    }
  }
</script>

<style scoped lang="scss">
  .pay-status {
    position: relative;
    width: 100%;
    height: 100%;
    .header {
      .img {
        padding: 50px 0 20px 50%;
        img {
          margin-left: -40px;
        }
      }
      .desc{
        color:#333;
        font-size:18px;
        text-align:center;
        padding-bottom:20px;
        border-bottom: 1px dashed #e2e2e2;
      }
    }
    .pay-status-content{
      .pay{
        line-height:80px;
        padding:0 26px;
        font-size:16px;
        .pay-desc{
          color:#333;
          display:inline-block;
        }
        .pay-price{
          color:#f76763;
          display:inline-block;
          float:right;
        }
      }
    }
  }
</style>
